// _button.scss
.button {
padding: 10px;
background-color: $primary-color;
border-radius: 5px;

&--primary {
background-color: blue;
}

&--secondary {
background-color: green;
}
}

// main.scss
@use 'button';

.container {
.button {
margin: 20px;
}
}

• 一個基於模塊化的網站樣式架構

/base/_reset.scss（基礎樣式重置）

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  *：選擇所有元素。
  margin 和 padding 設置為 0 以重置默認樣式
  box-sizing: border-box：確保邊距和內距不影響元素的寬度和高度

• /utils/_variables.scss（變量定義）

• $primary-color: #3498db;

• $secondary-color: #2ecc71;

• $font-size-base: 16px;

• $primary-color：定義網站主色

• $secondary-color：定義次要顏色

• $font-size-base：基礎字體大小

/components/_button.scss（按鈕樣式）
.button {
padding: 10px 15px;
background-color: $primary-color;
border: none;
color: white;
border-radius: 5px;
font-size: $font-size-base;

&--secondary {
background-color: $secondary-color;
}
}

• .button：定義按鈕的基本樣式。
• padding 和 background-color：控制按鈕的填充和背景顏色。
• &--secondary：使用修飾符模式來定義次要按鈕樣式

/layout/_header.scss（頁頭樣式）
.header {
background-color: $primary-color;
padding: 20px;

&logo {
font-size: 24px;
color: white;
}

&nav {
list-style: none;
display: flex;

&item {
  margin-right: 20px;
}

}
}

• .header：定義頁頭的基本樣式

• &logo 和 &nav：使用 BEM 命名法進行子元素的嵌套樣式

• &item：定義導航項目的樣式

• main.scss（主樣式文件）

• @use 'base/reset';

• @use 'utils/variables';

• @use 'components/button';

• @use 'layout/header';

• @use：將所有模塊引入主樣式文件，進行組合和管理

• 模塊化項目架構與 BEM 命名
  // _header.scss
  .header {
  background-color: $primary-color;
  padding: 20px;

  &logo {
  font-size: 24px;
  color: white;
  }

  &nav {
  list-style: none;

  &item {
  display: inline-block;
  margin-right: 15px;
  }
  }

  &--sticky {
  position: fixed;
  top: 0;
  }
  }

// main.scss
@use 'header';

• .header：BEM 命名的區塊部分，代表頁頭區域
• &logo：區塊的子元素，代表頁頭中的 logo
• &nav 和 &item：子元素，代表頁頭中的導航欄和導航項目
• &--sticky：修飾符，表示頁頭在滾動時固定在頂部
• 通過這種命名規則，樣式能夠非常清晰地表示各部分的功能，並且易於維護和擴展